<template>
  <div>
    <v-card title="折柱混合图" class="mb-50">
      <vcu-chart-bar :data="chartData" :settings="settings" />
    </v-card>

    <v-card title="双Y轴折柱混合图，线图百分比显示">
      <vcu-chart-bar :data="chartDataForMixin" :settings="settingsForMixin" />
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'bar-and-line',
  data() {
    return {
      chartData: {
        dimensions: {
          name: 'Month',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        },
        measures: [
          {
            name: 'Vue',
            data: [3000, 3500, 3900, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000],
          },
          {
            name: 'React',
            data: [2000, 2000, 2600, 2300, 2300, 2000, 2600, 2200, 2500, 2800, 2500, 2200],
          },
        ],
      },
      settings: {
        showLine: ['React'],
      },
      chartDataForMixin: {
        dimensions: {
          name: 'Month',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        },
        measures: [
          {
            name: 'Vue',
            data: [3000, 3500, 3900, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000],
          },
          {
            name: 'React',
            data: [0.91, 0.83, 0.71, 0.84, 0.93, 0.75, 0.87, 0.83, 0.95, 0.82, 0.86, 0.88],
          },
        ],
      },
      settingsForMixin: {
        secondMeaAxis: 'React',
        showLine: ['React'],
        yAxisLabelType: ['', 'percentage'],
      },
    }
  },
  methods: {},
  created() {},
}
</script>
<style lang="less" scoped>
</style>
